{% extends "layout.html" %}
{% block javascript %}
    {{ super() }}
    <script defer>
        // Establish communication with Central Dashboard
        window.addEventListener('DOMContentLoaded', function (event) {
            var CD_EvHandler = (window.centraldashboard || {}).CentralDashboardEventHandler;
            if (!CD_EvHandler) return;
            CD_EvHandler.init(function(handler, isIframed) {
                document.body.classList[isIframed?'add':'remove']('iframe-view');
                if (!isIframed) return;
                var ns = document.getElementById('ns-select');
                var wrapper = ns.parentElement;
                ns.disabled = isIframed;
                wrapper.classList.add('disabled');
                handler.onNamespaceSelected = function(namespace){
                    ns.value = namespace;
                };
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="{{ prefix + url_for('static', filename='js/notebooks.js') }}"></script>
    <script>
        var username = "{{ username }}"
        var rok_token = JSON.parse('{{ rok_token | tojson | safe}}')
    </script>
    <style>
        .Namespace-Selector.disabled {
            visibility: hidden;
            width: 0;
            pointer-events: none;
        }
    </style>
{% endblock %}

{% block content %}
{% if rok_token|length > 0  %}
<div class='parent'>
    <div class="spacer"></div>
    <!-- Namespace Selector -->
    <div class="Namespace-Selector mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <select class="mdl-textfield__input" id="ns-select" name="ns">
            <!-- Fill with the namespaces the user can see -->
            {% for ns in namespaces %}
                <option value="{{ ns }}" {% if ns == "kubeflow" %}selected{% endif %}>{{ ns }}</option>
            {% endfor %}
        </select>
        <label class="mdl-textfield__label" for="ns">Select Namespace</label>
    </div>

    <!-- Search Bar -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-nb">
            <i class="material-icons">search</i>
        </label>
        <div class="mdl-textfield__expandable-holder">
            <input class="mdl-textfield__input" type="text" id="search-nb" >
            <label class="mdl-textfield__label" for="search-nb">Enter your query...</label>
        </div>
    </div>
    <div class='spacer'></div>
</div>

<!-- The Notebooks Table -->
<div class="parent">
    <div class='spacer'></div>
    <!-- Table Card -->
        <div class="demo-card mdl-card mdl-shadow--4dp">

            <div class="mdl-card__title mdl-card--table__header">
                <h2 class="mdl-card__title-text mdl-typography--title">Notebook Servers</h2>
            </div>

            <hr/>
            <div class="mdl-card__table">
                <table class="mdl-data-table mdl-js-data-table">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Name</th>
                            <th>Created</th>
                            <th>Image</th>
                            <th>CPU</th>
                            <th>Memory</th>
                            <th>Volumes</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="nb-table-body">
                        <!-- Dynamically load the page -->
                    </tbody>
                </table>
            </div>

            <!-- Menus on top right of top card -->
            <div class="mdl-card__menu">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect 
                                                mdl-button--colored"
                                id="create-nb-btn">
                    <!-- <i class="material-icons">filter_list</i> -->
                    + NEW SERVER
                </button>
            </div>

        </div>

    <div class='spacer'></div>
</div>
{% else %}
    <div class="mdl-grid center-items">
        <div class="mdl-cell mdl-cell--8-col">
            <div class="alert alert-warning alert-dismissible">
                <span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
                <h3>
                    The Secret <code>"secret-rok-{{ username }}"</code> could not be found in the
                    Namespace <code>{{ ns }}</code>
                </h3>
                <h4>Please follow the steps below to address this issue:</h4>
                <p class="help-block">
                    1. Log in to Rok</br>
                    2. Go to Settings -> API access</br>
                    3. From the dropdown box choose "Kubernetes secret", and download your secret to
                    your computer as a local file, e.g., <code>secret-rok-{{ username }}.yaml</code></br>
                    4. Create a new secret on Kubernetes: <code>kubectl -n {{ ns }} create -f secret-rok-{{ username }}.yaml</code></br>
                    5. Verify that your new secret has been created: <code>kubectl -n {{ ns }} get secret secret-rok-{{username}}</code></br>
                    6. Refresh this page
                </p>
            </div>
        </div>
    </div>
{% endif %}
{% endblock content %}
